<template>
  <div>
    <el-card shadow="never" :body-style="{ padding: '10px' }">
      <!-- 卡片头部 -->
      <div slot="header">
        <el-button type="text" icon="el-icon-back"  @click="goBack"
          >返回</el-button
        >
        <el-divider direction="vertical"></el-divider>
        视频标题：<span class="head-font">{{ videoName }}</span>
        <el-divider direction="vertical"></el-divider>
        记录总数：<span class="head-font">{{ totalNum }}</span>
      </div>
      <!-- 卡片信息 -->
      <div style="float: left; width: 100%">
        <!-- 信息列表 -->
        <el-table
          border
          v-loading="listLoading"
          :header-cell-style="{ background: '#FAFAFA' }"
          :data="recordList"
          height="80vh"
          style="width: 100%"
        >
          <el-table-column type="index" width="100"> </el-table-column>
          <el-table-column prop="studentId" label="学员id"> </el-table-column>
          <!-- <el-table-column prop="videoId" label="视频id"> </el-table-column> -->
          <!-- 学员姓名 -->
          <el-table-column label="学员姓名">
            <template slot-scope="scope">
              <span>{{ scope.row.studentName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="costTime" label="视频观看时长(分钟)">
            <template slot-scope="scope">
              <span> {{ (scope.row.costTime / 60).toFixed(1) }} </span>
            </template>
          </el-table-column>
          <el-table-column prop="complete" label="是否看完">
            <template slot-scope="scope">{{
              scope.row.complete == "1" ? "是" : "否"
            }}</template>
          </el-table-column>
          <el-table-column prop="progress" label="学习进度(%)">
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getRecordsByVideoId } from "@/api/video";
export default {
  //做题记录列表
  name: "videoStudyRecord",
  data: function () {
    return {
      //表格加载遮罩
      listLoading: "false",
      //视频编号
      videoId: this.$route.query.id,
      //视频姓名
      videoName: this.$route.query.videoName,
      //记录总数
      totalNum: "",
      //记录列表
      recordList: [],
    };
  },
  created: function () {
    this.queryAllRecord();
  },
  methods: {
    //根据学员编号查找的学习记录列表
    queryAllRecord() {
      this.listLoading = true;
      getRecordsByVideoId(this.videoId).then((res) => {
        this.totalNum = res.data.records.total;
        this.recordList = res.data.records.recordInfos;
        this.listLoading = false;
      });
    },
    //返回
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.head-font {
  font-weight: bold;
}
.search {
  width: 30%;
}
.el-card {
  height: 100vh;
}
</style>